<!--  -->
<template>
  <div>
      <div class="swiperTow">
          <swiper :options="swiperOption" ref="mySwiper" class="swiper">
			<!-- 这部分放你要渲染的那些内容 -->
			<swiper-slide v-for="(item, index) in first" :key="index">
        <!-- {{item.thumb}} -->
            <img :src="item.thumb" alt="">
			</swiper-slide>
                
			<!-- 这是轮播的小圆点 -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
      </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
    props:[
        "first"
    ],
  data () {
    return {
        swiperOption: {
        loop: true,
        autoplay:true,
        pagination: {
          el: ".swiper-pagination",
        }
      }
    };
  },
}

</script>
<style scoped>
.swiper-container {
  width: 100%;
  height: 3.2rem;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
}
.swiper-container-horizontal >>> .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px;
    background: #fff;
}
</style>